<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>预安置人员信息录入——添加</title>
    <script src="/webjars/miniui/boot.js" type="text/javascript"></script>
    <link href="/static/css/resource.css" rel="stylesheet" type="text/css" />
    <script src="/static/js/common/common.js" type="text/javascript"></script>
    <link href="/webjars/miniui/css/demo.css" rel="stylesheet" type="text/css" />
    <link href="/static/css/default.css" rel="stylesheet" type="text/css" />
    <link href="/webjars/miniui/frame/tabs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div align="center">
    </br>
    <input type="file" id="pic" name="pic" onchange="fileChange(this)" />
    <input type="button" value="批量导入预安置人员" onclick="uploadFile()" />
</div>
<div id="progressBar" style="padding:0px;border:solid black 0px;visibility:hidden">
    <table width="300" border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
            <td align="center" id="progressPersent">0%</td>
        </tr>
        <tr>
            <td>
                <!-- 黑色边框部分 -->
                <table width="100%" border="1" cellspacing="0" cellpadding="0"
                       bordercolor="#000000">
                    <tr>
                        <td>
                            <!-- 红色部分 -->
                            <table width="1%" border="0" cellspacing="0" cellpadding="0"
                                   bgcolor="#228b22" id="progress">
                                <tr>
                                    <td>&nbsp;</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="center" id="complete">上传完成</td>
        </tr>
    </table>
</div>
<script>
    var xhr = new XMLHttpRequest();

    //上传失败
    function uploadFailed(evt) {
        document.getElementById("progressBar").style.visibility = "hidden";
        document.getElementById("complete").innerText = "上传异常！";
    }

    /**
     * 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
     */
    function onprogress(evt) {
        document.getElementById("progressBar").style.visibility = "visible";
        //已经上传大小情况
        var loaded = evt.loaded;
        //附件总大小
        var tot = evt.total;
        //已经上传的百分比
        var per = Math.floor(100 * loaded / tot);
        document.getElementById("progressPersent").innerText = per + "%";
        document.getElementById("progress").style.width = per + "%";
    }

    function fileChange(target) {
        var fileSize = 0;
        if (!target.files) {
            var filePath = target.value;
            var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
            var file = fileSystem.GetFile(filePath);
            fileSize = file.Size;
        } else {
            fileSize = target.files[0].size;
        }
        var size = fileSize / 1024;
        if (size > 20000) {
            mini.alert("附件不能大于20M");
            target.value = "";
            return
        }
        var name = target.value;
        var fileName = name.substring(name.lastIndexOf(".") + 1).toLowerCase();
        //改造表现附件4、心理健康附件5
        if (fileName != "xls" && fileName != "xlsx") {
            mini.alert("请选择.xls .xlsx格式文件上传！");
            target.value = "";
        }
    }

    //上传文件
    function uploadFile() {
        //将上传的多个文件放入formData中
        var picFileList = document.getElementById("pic").files;
        if (picFileList.length == 0) {
            mini.alert("请选择文件！");
            return;
        }
        var formData = new FormData();
        formData.append("file", picFileList[0]);
        //监听事件
        xhr.upload.addEventListener("progress", onprogress, false);
        //发送文件和表单自定义参数
        xhr.addEventListener("error", uploadFailed, false);
        xhr.open("POST", "/azbj/import/scanfile", true);
        //记得加入上传数据formData
        xhr.send(formData);
        document.getElementById("complete").innerText = "上传完成";
        mini.mask({
            el: document.body,
            cls: 'mini-mask-loading',
            html: '解析中...'
        });
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                data = JSON.parse(xhr.responseText);
                var code = data.code;
                var message = data.message;
                if (data.data.length == 3) {
                    var total = data.data[0];
                    var success = data.data[1];
                    var fail = data.data[2];
                }
                if (code == 1) {
                    mini.unmask(document.body);
                    document.getElementById("progress").style.width = "100%";
                    document.getElementById("progressPersent").innerText = "100%";
                    if(undefined == total || undefined == success || undefined == fail) {
                        document.getElementById("complete").innerText = "检测到文档不合法，请从批量导入模版下载指定文档后上传!";
                        return;
                    }
                    document.getElementById("complete").innerText =
                        "本次导入结果：共导入" + total + "条数据，其中" + success + "条数据解析成功，" + fail + "条数据解析失败。" +
                        "解析成功的数据可保存至信息录入页面，解析失败的数据请进行编辑。";
                    var file = document.getElementById('pic');
                    file.value = null;
                } else {
                    mini.unmask(document.body);
                    document.getElementById("complete").innerText = "导入失败！" + message;
                }
            }
        }
    }
</script>
</body>
</html>